<template>
  <div class="waterfall-wrapper">
    <ul class="list" ref="left">
      <li
        class="item"
        v-for="item in data"
        v-bind:style=" {height:item.height+'px'}"
        :key="item.pid"
      >
        <router-link tag="div" :to="{path: '/discover/detail', query:{id: item.pid}}">
          <img :src="item.pimg" alt />
          <p class="desc">{{item.pdesc}}</p>
          <p>{{item.pname}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
window.PointerEvent = void 0;
</script>

<script>
import * as api from "../api/getProlist";
export default {
  name: "float",
  data() {
    return {
      data: [],
      page: "6"
    };
  },
  mounted() {
    api.getAllProd().then(da => {
      this.data = da.data.result;
    });
  },
  methods: {
    updateWaterfall() {
      const leftHeight = this.$refs.left.clientHeight;
      const rightHeight = this.$refs.right.clientHeight;
      let item = this.data.shift();
      if (item == null) {
        return;
      }
      if (leftHeight <= rightHeight) {
        this.leftItems.push(item);
      } else {
        this.rightItems.push(item);
      }
      this.$nextTick(function() {
        this.updateWaterfall();
      });
    },
    tiaozhuan() {
      // this.$router.push('/discover/detail')
    }
  }
};
</script>

<style  scoped>
.waterfall-wrapper {
  overflow: hidden;
}
.waterfall-wrapper ul {
  width: 100%;
  overflow: hidden;
}
.waterfall-wrapper ul li {
  float: left;
  width: 44%;
  margin-left: 28px;
  color: black;
}
.waterfall-wrapper ul li .desc {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waterfall-wrapper ul .item img {
  width: 100%;
}
</style>